import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex)
const store = new Vuex.Store({
  //共享的数据
  state: {
    isCollapse: false
  },
  //定义的方法  要修改state中的数据  一定要通过mutations中的方法进行修改  mutations中只能进行同步操作  不要在这里发起ajax请求
  //调用方法  this.$store.commit('方法名')
  mutations: {
    changeCollapse(state) {
      state.isCollapse = !state.isCollapse
    },
  },
  //类似于计算属性  当数据需要计算后在使用  可以用这个
  //调用方法:this.$store.getters.testGetter
  getters: {
    testGetter(state) {
      return '测试'
    }
  },
  //vuex的异步操作应当放在这里执行
  actions: {
    //这里的context相当于store   注意！！！  不要再这里直接修改state数据  应该在这里调用mutations中的方法
    //因为state的数据只能在 mutations中进行修改
    //调用方法  this.$store.dispatch('testActions')
    testActions(context) {
      context.commit("changeCollapse")
    },
  }
})

export default store
